<template>
  <section class="index-home">
      <Carouse/>
      <div class="home-article-list-wrap bg-white mt20">
          <ul class="home-article-list">
              <li class="article-item clearfix" v-for="(item,index) in article_list">
                  <div class="article-img fl">
                      <img class="img-responsive" :src="item.image" alt="">
                  </div>
                  <div class="item-info fr">
                      <h2 class="item-title fs20">{{item.title}}</h2>
                      <div class="article-desc fs14">
                          {{item.description}}
                      </div>
                      <div class="time-more clearfix">
                          <div class="tab-name fl">前端文章</div>
                          <div class="time fl">{{item.created_at}}</div>
                          <el-button type="primary" class="fr">阅读更多</el-button>
                      </div>
                  </div>
              </li>
          </ul>
      </div>
  </section>
</template>

<script>
import Carouse from '~/components/Carouse'

export default {
    components: {
        Carouse
    },
    async asyncData({ app }) {
        // const data = await app.$axios.$get('api/get_article',{params:{count:10}});
        // let article_list = null;
        // if(data.code ==1 ){
        //     article_list = data.data.data;
        // }
        // return { article_list }
    },
    data(){
        return {
            id:1,
            article_list:[]
        }
    },
    created(){
        this._get_article_list();
    },
    mounted(){

    },
    methods:{
        async _get_article_list() {
             const ret = await this.$axios.$get('get_article',{params:{count:10}});
             if(ret.code == 1){
                 this.article_list = ret.data.data;
             }
        }
    }
}
</script>

<style scoped lang="scss">
    .home-article-list-wrap{
        padding: 20px;
        border: 1px solid #ddd;
    }
    .home-article-list{
        .article-item{
            border-bottom: 1px dashed #e5e5e5;
            overflow: hidden;
            padding-bottom: 20px;
            margin-top: 20px;
            &:nth-child(1){
                margin-top: 0;
            }
            &:hover{
                cursor: pointer;
                .article-img{
                    img{
                        width: calc(100% + .5em);
                    }
                }
                .item-title{
                    color: #444;
                    font-weight: normal;
                }
            }
            .article-img{
                width: 28%;
                overflow: hidden;
                height: 150px;
                img{
                    width: calc(100% + .5em);
                }
                &:hover{
                    img{
                        width: calc(100% + .5em);
                    }
                }
            }
            .item-info{
                position: relative;
                width: 70%;
                height: 150px;
                .item-title{
                    color: #444;
                    font-weight: normal;
                    line-height: 1;
                }
                .article-desc{
                    width: 100%;
                    padding-top: 15px;
                    color: #989898;
                    height: 70px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: normal;
                }
                .time-more{
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    font-size: 14px;
                    line-height: 1;
                    .tab-name{
                        color: $primary-color;
                        display: inline-block;
                        padding-right: 10px;
                        margin-right: 10px;
                        border-right:1px solid #ccc;
                    }
                    .time{
                        color: #ccc;
                    }
                    .tab-name,.time{
                        margin-top: 10px;
                    }
                    .el-button{
                        border-radius: 0;
                    }

                }
            }
        }
    }
</style>
